{% extends 'movie/base.html' %}
{% block content %}
    <style>
        .item {
            display: block;
            float: left;
            font-size: 10px;
            text-align: center;
            margin: 0 25px 10px 0;
            width: 200px;
        }

        .item .poster_div {
            height: 320px;
            overflow: hidden;
        }

        li {
            height: 45px;
            width: 110px;
        }
        .{{ genre }}{

        }
        
     
    li {
        color: #ffffff; /* 设置文字颜色为黑色 */
        font-size: 19px; /* 设置字体大小为24像素 */
        {#background-color: rgba(255, 255, 255, 0.41); /* 设置背景颜色为白色 */#}
        padding: 2px; /* 添加内边距，使内容更加突出 */
        margin-bottom: 15px; /* 可选：添加底部外边距，与下面的内容保持间距 */
        border: 1px solid white; /* 添加边框，实线黑色 */
        border-radius: 8px; /* 设置边框的圆角半径为8像素 */
    }
    
    </style>
    <div class="container">
        <ul class="nav nav-pills ">
            <li role="presentation" class="active"><a href="#">类型</a></li>
            <li role="presentation" class="喜剧"><a href="{% url 'movie:tag' %}?genre=喜剧">喜剧</a></li>
            <li role="presentation" class="爱情"><a href="{% url 'movie:tag' %}?genre=爱情">爱情</a></li>
            <li role="presentation" class="科幻"><a href="{% url 'movie:tag' %}?genre=科幻">科幻</a></li>
            <li role="presentation" class="动作"><a href="{% url 'movie:tag' %}?genre=动作">动作</a></li>
            <li role="presentation" class="动画"><a href="{% url 'movie:tag' %}?genre=动画">动画</a></li>
            <li role="presentation" class="悬疑"><a href="{% url 'movie:tag' %}?genre=悬疑">悬疑</a></li>
            <li role="presentation" class="犯罪"><a href="{% url 'movie:tag' %}?genre=犯罪">犯罪</a></li>
            <li role="presentation" class="惊悚"><a href="{% url 'movie:tag' %}?genre=惊悚">惊悚</a></li>
            <li role="presentation" class="冒险"><a href="{% url 'movie:tag' %}?genre=冒险">冒险</a></li>
            <li role="presentation" class="音乐"><a href="{% url 'movie:tag' %}?genre=音乐">音乐</a></li>
            <li role="presentation" class="历史"><a href="{% url 'movie:tag' %}?genre=历史">历史</a></li>
            <li role="presentation" class="奇幻"><a href="{% url 'movie:tag' %}?genre=奇幻">奇幻</a></li>
            <li role="presentation" class="恐怖"><a href="{% url 'movie:tag' %}?genre=恐怖">恐怖</a></li>
            <li role="presentation" class="战争"><a href="{% url 'movie:tag' %}?genre=战争">战争</a></li>
            <li role="presentation" class="传记"><a href="{% url 'movie:tag' %}?genre=传记">传记</a></li>
            <li role="presentation" class="歌舞"><a href="{% url 'movie:tag' %}?genre=歌舞">歌舞</a></li>
            <li role="presentation" class="武侠"><a href="{% url 'movie:tag' %}?genre=武侠">武侠</a></li>
            <li role="presentation" class="情色"><a href="{% url 'movie:tag' %}?genre=情色">情色</a></li>
            <li role="presentation" class="灾难"><a href="{% url 'movie:tag' %}?genre=灾难">灾难</a></li>
            <li role="presentation" class="西部"><a href="{% url 'movie:tag' %}?genre=西部">西部</a></li>
            <li role="presentation" class="记录片"><a href="{% url 'movie:tag' %}?genre=记录片">记录片</a></li>
            <li role="presentation" class="短片"><a href="{% url 'movie:tag' %}?genre=短片">短片</a></li>
            <li role="presentation" class="古装"><a href="{% url 'movie:tag' %}?genre=古装">古装</a></li>
            <li role="presentation" class="家庭"><a href="{% url 'movie:tag' %}?genre=家庭">家庭</a></li>
            <li role="presentation" class="剧情"><a href="{% url 'movie:tag' %}?genre=剧情">剧情</a></li>
            <li role="presentation" class="真人秀"><a href="{% url 'movie:tag' %}?genre=真人秀">真人秀</a></li>
            <li role="presentation" class="儿童"><a href="{% url 'movie:tag' %}?genre=儿童">儿童</a></li>
            <li role="presentation" class="运动"><a href="{% url 'movie:tag' %}?genre=运动">运动</a></li>
            <li role="presentation" class="同性"><a href="{% url 'movie:tag' %}?genre=同性">同性</a></li>
            <li role="presentation" class="戏曲"><a href="{% url 'movie:tag' %}?genre=戏曲">戏曲</a></li>
        </ul>
        {% if genre %}
            <div class="alert alert-info" role="alert" style="font-size: 18px;">{{ genre }} 类型的电影：</div>
        {% endif %}

    </div>
    <!--展示电影图片用-->
    <div class="container">
        {% for movie in movies %}
            <a href="{% url 'movie:detail' movie.pk %}" class="item">
                <div class="poster_div">
                    <img src="/static/movie/img/{{ movie.imdb_id }}.jpg" alt="">
                    <p style="color: #ffffff;font-size: 20px;">{{ movie.name }}<br>
                        <strong style="color:#ffffff">评分{{ movie.get_score }}</strong>
                    </p>

                </div>
            </a>
        {% endfor %}
    </div>

    <nav style="text-align: center;">
        <ul class="pagination">
            {#previous page#}
            {% if page_obj.has_previous %}
                <li><a href="{% url 'movie:tag' %}?p={{ page_obj.previous_page_number }}">上一页</a></li>
            {% else %}
                <li class="disabled"><a href="javascript:void(0);">上一页</a></li>
            {% endif %}

            {% if left_has_more %}
                <li><a href="{% url 'movie:tag' %}?p=1">1</a></li>
                <li><a href="javascript:void(0)">...</a></li>
            {% endif %}

            {#        左边的page#}
            {% for left_page in left_pages %}
                <li><a href="{% url 'movie:tag' %}?p={{ left_page }}">{{ left_page }}</a></li>
            {% endfor %}

            {#    当前的page#}
            <li class="active"><a href="javascript:void(0);">{{ current_page }}</a></li>

            {#     右边的page#}
            {% for right_page in right_pages %}
                <li><a href="{% url 'movie:tag' %}?p={{ right_page }}">{{ right_page }}</a></li>
            {% endfor %}
            {% if right_has_more %}
                <li><a href="javascript:void(0)">...</a></li>
                <li><a href="{% url 'movie:tag' %}?p={{ paginator.num_pages }}">{{ paginator.num_pages }}</a></li>
            {% endif %}
            {#next page#}
            {% if page_obj.has_next %}
                <li><a href="{% url 'movie:tag' %}?p={{ page_obj.next_page_number }}">下一页</a></li>
            {% else %}
                <li class="disabled"><a href="javascript:void(0);">上一页</a></li>
            {% endif %}
        </ul>
    </nav>
{% endblock %}